Event Handling (1/4)
How do you handle click events in Svelte? What is on:click, and how does it work?

    In Svelte, click events are handled using the **`on:click` directive**, which allows you to run a function or execute inline code whenever a user clicks an element. This is similar to `addEventListener('click', ...)` in plain JavaScript but with much cleaner syntax.

    Simple Click Event Example

    Here, when the button is clicked, the `increment` function runs and updates the `count` variable. Svelte automatically updates the DOM wherever `count` is used.

    Inline on:click Example

    You can also write inline expressions directly inside `on:click`. In this example, clicking the button directly updates the `message` variable.

    Passing Arguments

    To pass arguments to a function, wrap the call in an arrow function. This prevents the function from running immediately when the component renders.

    Key Points About on:click
    • Use `on:click={functionName}` to call a function when an element is clicked.
    • Inline arrow functions can be used for quick logic or to pass arguments.
    • Svelte automatically handles cleanup — no need to manually remove event listeners.
    • `on:click` works with any HTML element, not just buttons.